<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/common-list.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<header>
		<div class="header-con">
			<a class="navbar-header" href="">
				<img src="../images/logo.png" alt="">
			</a>
			<ul>
				<li>
					<a href="">首页</a>
				</li>
				<li>
					<a href="">人资管理</a>
				</li>
				<li>
					<a href="">指标设置</a>
				</li>
				<li>
					<a href="">数据统计</a>
				</li>
				<li>
					<a href="">工作时设置</a>
				</li>
				<li>
					<a href="">财务管理</a>
				</li>
			</ul>
		</div>
		<div class="peo-message">
			<div class="peo-cir">
				<!-- <img src="" alt=""> -->
			</div>
			<em>黑披士</em>
			<span class="down-list"></span>
			<!-- <ul>
				<li>123</li>
			</ul> -->
		</div>
	</header>
	<div class="boxed clearfix">
		<div class="common-tit">
			<h2>课程数据</h2>
			<span>数据统计 > 课程数据</span>
			<div class="cours-gbtn">
				<div class="list-box">
					<div class="downbtn">
						<span>全部分店</span>
						<em></em>
					</div>
					<ul class="dropdown-menu">
						<li>测试测试</li>
						<li>我们</li>
						<li>测试测试测试</li>
						<li>asdfasdfsaf	</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="global-data">
			<div class="xdata-box">
				<h3>课消排行榜</h3>
				<div id="coursConsumption"></div>
			</div>
			<div class="pdata-box clearfix">
				<div id="classRoom"></div>
				<div id="consuType"></div>
				<div id="courseType"></div>
				<div id="coType"></div>
			</div>
		</div>
	</div>
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/echarts.common.min.js"></script>
	<script src="../js/common-list.js"></script>
	<script>
		// 导师课消
		var myChart = echarts.init(document.getElementById('coursConsumption'));
		option = {
		    tooltip: {
		        trigger: 'axis',
		    },
		    legend: {
		        data: ['2011年', '2012年']
		    },
		    grid: {
		        left: '10%',
		        right: '7%',
		        top: '1%',
		        containLabel: false
		    },
		    toolbox: {
		         show : true,
		     },
		    xAxis: {
		        type: 'value',
		        boundaryGap: [0, 0.01]
		    },
		    yAxis: {
		        type : 'category',
		         axisLabel:{
		                 interval:0,
		                 rotate:45,
		                 margin:2,
		                 textStyle:{
		                    color:"#222"
		                 }},
		        data: ['课程名字1','课程名字2','课程名字3','课程名字4','课程名字5','课程人名6','课程名字7','课程名字8','课程名字9','课程名字10']
		    },
		    series: [
		        {
		            name: '今天',
		            type: 'bar',
		            data: [18203, 23489, 29034, 104970, 131744, 630230, 430230, 230230, 730230, 530230]
		        }
		        // ,
		        // {
		        //     name: '昨天',
		        //     type: 'bar',
		        //     data: [88203, 33489, 79034, 404970, 331744, 630230, 330230, 630230, 330230, 530230]
		        // },
		        // {
		        //     name: '过去7天',
		        //     type: 'bar',
		        //     data: [48203, 23489, 89034, 504970, 731744, 430230, 230230, 430230, 230230, 430230]
		        // }, 
		        // {
		        //     name: '过去30天',
		        //     type: 'bar',
		        //     data: [38203, 43489, 59034, 604970, 431744, 630230, 230230, 730230, 330230, 830230]
		        // }

		    ]
		};

		myChart.setOption(option);

		//教室使用占比
		var myChart1 = echarts.init(document.getElementById('classRoom'));
		option1 = {
			color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
		    title : {
		        text: '教室使用占比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['教室1','教室2','教室3','教室4','教室5','教室6']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'教室1'},
		                {value:5, name:'教室2'},
		                {value:15, name:'教室3'},
		                {value:25, name:'教室4'},
		                {value:20, name:'教室5'},
		                {value:17, name:'教室6'}
		            ]
		        }
		    ]
		};
		myChart1.setOption(option1);
		// 消费类型比
		var myChart2 = echarts.init(document.getElementById('consuType'));
		option2 = {
		    title : {
		        text: '消费类型比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['单次售卖','打包售卖']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'单次售卖'},
		                {value:25, name:'打包售卖'}
		            ]
		        }
		    ]
		};
		myChart2.setOption(option2);
		// 课程类型课消比
		var myChart3 = echarts.init(document.getElementById('courseType'));
		option3 = {
		    title : {
		        text: '课程类型课消比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['私教','特色课','常规课']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'私教'},
		                {value:5, name:'特色课'},
		                {value:15, name:'常规课'}
		            ]
		        }
		    ]
		};
		myChart3.setOption(option3);
		// 消费方式比
		var myChart4 = echarts.init(document.getElementById('coType'));
		option4 = {
		    title : {
		        text: '消费方式比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['次卡','售卖课程','充值','年卡', '月卡']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'次卡'},
		                {value:5, name:'售卖课程'},
		                {value:15, name:'充值'},
		                {value:25, name:'年卡'},
		                {value:9, name:'月卡'}
		            ]
		        }
		    ]
		};
		myChart4.setOption(option4);
	</script>
</body>
</html>